<template>
     <div class="warps">
         
            <div 
            :class="['warps_item',{
                'actives':index<props.count
            }]"
            v-for="(item,index) in str"
            >{{item}}</div>
     </div>
</template>
<script setup>
import {ref} from 'vue';
const props = defineProps(['str','count'])
 
</script>
<style>
.indextext{
   width: 50px;
 
}
.warps{
   display: flex;
   width: 700px;
   flex-wrap: wrap;
    justify-content: center;
   margin: 1rem auto;
   align-items: center;  
}
.warps_item{
   opacity: 0.0;
   transition: all 1.1s ease-in-out 0.1s; 
   font-family: myfont;
   margin-top: .3rem;
   color: aliceblue;
   font-size: 1.5rem;
}
.actives{
   opacity: 1;
}
</style>